<template>
  <div class="login">
    <div class="login-form">
      <div class="login-title">
        <span class="words">测试平台</span>
      </div>
      <Form v-if="!register">
        <FormItem prop="userName">
          <Input placeholder="请输入账号" type="text" class="i-input mobile" v-model="username" />
        </FormItem>
        <FormItem prop="Password">
          <Input placeholder="请输入密码" type="password" password class="i-input password" v-model="password" />
        </FormItem>
        <Button type="primary" long @click="handleLogin()" :disabled="disabled" :loading="loading">登录</Button>
        <Button style="margin-top: 10px" long @click="handleRegister()">注册</Button>
      </Form>

      <Form ref="register" v-if="register" :model="registerForm" :rules="ruleRegisterForm">
        <FormItem prop="username">
          <Input placeholder="请输入账号" type="text" class="i-input mobile" v-model="registerForm.username" />
        </FormItem>
          <FormItem prop="email">
              <Input placeholder="请输入邮箱" type="text" class="i-input mobile" v-model="registerForm.email" />
          </FormItem>
        <FormItem prop="password">
          <Input placeholder="请输入密码" type="password" password class="i-input password" v-model="registerForm.password"/>
        </FormItem>
        <Button type="primary" long @click="onRegister()" :loading="loading" :disabled="disabled">注册</Button>
        <Button style="margin-top: 10px" long @click="onReturn">返回</Button>
      </Form>
    </div>
  </div>
</template>

<script>
import {registerApi, login} from "@/utils/api";

export default {
  data() {
    return {
        loading: false,
      disabled: false,
      register: false,
      username: "",
      password: "",
      registerForm: {
        username: "",
        password: "",
        email: ""
      },
      ruleRegisterForm: {
          username: [{required: true, message: '用户名不能为空', trigger: 'blur'}],
          email: [{required: true, message: '邮箱不能为空', trigger: 'blur'}],
        password: [
          {required: true, message: '密码不能为空', trigger: 'blur'},
          {
            type: 'string',
            trigger: 'blur',
            validator: (rule, value, callback) => {
              var passwordreg = /(?=.*[a-zA-Z])(?=.*\d)[^]{6,16}$/
              if (!passwordreg.test(value)) {
                callback(new Error('密码必须由数字、字母组合,请输入6-16位'))
              }else{
                callback()
              }
            }
          }
          ]
      }
    }
  },
  methods: {
    handleLogin() {
        this.disabled = true;
        this.loading = true;
      const obj = {
          username: this.username,
          password: this.password
      }
      login(obj).then(res => {
        if (res.data.result === 1){
          localStorage.setItem("token",res.data.data.token);
          localStorage.setItem("userInfo",JSON.stringify(res.data.data.user))
          this.$Message.success("登录成功!")
          this.$router.push({name: 'home'});
          this.disabled = false;
          this.loading = false
        } else {
          this.$Message.error(res.data.error_message);
          this.disabled = false;
          this.loading = false;
        }
      })
    },
    handleRegister() {
      this.register = true;
    },
    onRegister() {
      this.$refs['register'].validate((valid) => {
        if (valid) {
            this.loading = true;
            this.disabled = true;
          registerApi(this.registerForm).then(res => {
            if (res.data.result === 1) {
                this.$Message.success("注册成功");
                this.register = false;
                this.loading = false;
                this.disabled = false;
            }else {
                this.$Message.error(res.data.error_message)
                this.loading = false;
                this.disabled = false;
            }
          })
        }
      })
    },
    onReturn() {
      this.register = false;
    }
  }
};
</script>

<style lang="stylus" scoped>
.login
  min-width 1440px
  width 100%
  height 100%
  background url('../../assets/imgs/login.png') center center no-repeat
  background-size cover
  position relative

  .login-form
    position absolute
    right 38%
    top 50%
    transform translateY(-50%)
    width 360px
    background rgba(255, 255, 255, 1)
    box-shadow 0px 0px 16px 0px rgba(0, 0, 0, 0.2)
    border-radius 8px
    padding 32px

    .login-title
      margin-bottom 16px
      text-align center

      .words
        font-size 20px
        font-weight 500
        color rgba(122, 133, 163, 1)
        height 32px
        line-height 32px
        vertical-align middle

    .remember-check
      text-align left
      margin-top 34px
      margin-bottom 0
      height 17px
      line-height 17px

    // 按钮的通用样式

    .f-button
      display inline-block
      width 100%
      text-align center
      border-radius 24px
      height 36px
      font-size 16px

    .button-m
      margin 24px 0

    .forget-button
      width 100%
      padding-top 0
      padding-bottom 0
      margin-top 16px
      height 20px
      line-height 20px
      font-size 14px

    // 登录面包屑板块

    .breadcrumb
      height 20px
      font-size 14px
      font-weight 500
      color rgba(23, 26, 35, 1)
      line-height 20px
      margin-bottom 24px
      text-align left

      .breadcrumb-btn
        padding 0
        font-size 14px
        font-weight 500

        &:focus
          box-shadow none
          color rgba(23, 26, 35, 1)

        &:hover
          color rgba(23, 26, 35, 1)

    .tips
      width 280px
      height 17px
      font-size 12px
      font-weight 400
      color rgba(115, 119, 135, 1)
      line-height 17px
      margin-top 8px

    .tips-space
      margin-top 48px

    .verify-code
      position absolute
      right 0
      top inherit

  .adjust-icon
    font-size 16px
    height 40px
    color #737787
    text-align center
    vertical-align baseline

    &:hover
      color #7ABC5D
</style>
